<template>
  <div class="table-component">
    <div class="row-content">
      <div class="order-number">
        <div class="order-number-left">
          {{ orderDetails.lotName }}-{{ orderDetails.licensePlate }}
        </div>
        <div class="licensePlate-type">
          （
          {{
            orderDetails.cardType == 1
              ? "临时卡"
              : orderDetails.cardType == 2
              ? "月卡"
              : orderDetails.cardType == 3
              ? "白名单"
              : "-"
          }}
          ）
        </div>
      </div>
      <div style="display: flex">
        <div style="width: 76%">
          <div class="order-details">
            <el-row>
              <div class="order-details-title">订单总额：</div>
              <div class="order-details-content">￥{{ orderDetails.total }}</div>
            </el-row>
            <el-row>
              <div class="order-details-title">待付金额：</div>
              <div class="order-details-content">￥{{ orderDetails.tobePaid }}</div>
            </el-row>
            <el-row>
              <div class="order-details-title">优惠金额：</div>
              <div class="order-details-content">￥{{ orderDetails.discount }}</div>
            </el-row>
          </div>
          <div class="order-details" style="margin-top: 25px">
            <el-row>
              <div class="order-details-title">停车时长：</div>
              <div class="order-details-content">{{ orderDetails.duration }}</div>
            </el-row>
            <el-row>
              <div class="order-details-title">手机号：</div>
              <div class="order-details-content">{{ orderDetails.ownerPhone }}</div>
            </el-row>
            <el-row>
              <div class="order-details-title">车辆类型：</div>
              <div class="order-details-content">
                {{
                  orderDetails.carType == 1
                    ? "大型车"
                    : orderDetails.carType == 2
                    ? "小型车"
                    : orderDetails.carType == 3
                    ? "新能源"
                    : orderDetails.carType == 4
                    ? "特殊车辆"
                    : "-"
                }}
              </div>
            </el-row>
          </div>
          <div class="order-details" style="margin-top: 25px">
            <el-row>
              <div class="order-details-title">订单编号：</div>
              <div class="order-details-content">
                <div>{{ orderDetails.orderNo }}</div>
                <img class="icon-img" :src="iconCopy" @click="copyText" alt="" />
              </div>
            </el-row>
          </div>
        </div>
        <div class="order-details2" style="width: 20%; text-align: center">
          <div>
            <div class="order-details-title2">实付金额</div>
            <div class="order-details-content2">￥{{ orderDetails.received }}</div>
          </div>
          <div class="line"></div>
          <div>
            <div class="order-details-title2">订单状态</div>
            <div class="order-details-content2">进行中</div>
          </div>

          <div></div>
        </div>
      </div>

      <el-dialog
        v-model="dialogVisible"
        :title="title"
        destroy-on-close
        :before-close="handleClose"
        :close-on-click-modal="false"
        width="390"
      >
        <component :is="componentTag" @operationDone="operationDone" :data="operationId">
        </component>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, shallowRef } from "vue";
import iconCopy from "@/assets/image/btn/icon-copy.png";
const props = defineProps({
  orderDetails: {
    type: Object,
    default: () => {},
  },
});

// 弹窗
const title = ref("");
const dialogVisible = ref(false);
const componentTag = shallowRef("");
const operationId = ref("");
const operationDone = (r) => {
  dialogVisible.value = false;
  operationId.value = "";
  if (!r) {
    getData();
  }
};

const copyText = async () => {
  try {
    await navigator.clipboard.writeText(props.orderDetails.orderNo);
    alert("复制成功");
  } catch (err) {
    alert("复制失败", err);
  }
};
</script>

<style lang="less" scoped>
.table-component {
  .row-content {
    .order-number {
      display: flex;
      align-items: flex-end;
      margin-bottom: 24px;
      .order-number-left {
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 20px;
        color: #333333;
      }
      .licensePlate-type {
        font-weight: 600;
        font-size: 14px;
        color: #333333;
      }
    }
    .order-details {
      display: flex;
      .order-details-title {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
      }
      .order-details-content {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        display: flex;
      }
      .icon-img {
        width: 11px;
        height: 12px;
        cursor: pointer;
        margin-left: 4px;
      }
    }
    .order-details > div {
      flex: 1;
      text-align: center;
    }
    .order-details2 {
      display: flex;
      justify-content: right;
      .order-details-title2 {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        margin-bottom: 6px;
      }
      .order-details-content2 {
        font-weight: 400;
        font-size: 20px;
        color: #333333;
      }
      .line {
        width: 1px;
        height: 43px;
        background: #cbcbcb;
        margin: 0 24px;
      }
    }
  }

  .row {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
